<template>
  <div class="push-body">
    <ul v-if="pushList">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :offset='0'
                :immediate-check=false
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad">
        <li class="list"
            :class="{swipeleft:item.className}"
            v-for="(item,index) in pushList"
            :key="index"
            ref="lists"
            @touchstart='slideStart(index,$event)'
            @touchmove='slideMove(index,$event)'>
          <div class="left"
               @click="goEdit(item)">
            <template v-for="(val,i) in item.content">
              <p v-if="val.type==1"
                 class="text"
                 :key="i">{{val.name}}</p>
            </template>
            <template v-for="(val,i) in item.content">
              <span class="yuyin"
                    :key='i'
                    v-if="val.type==2">
                <img src="../../images/center/ts_yuyin.png"
                     alt />
                {{val.duration}}
              </span>
            </template>
            <template v-for="(val,i) in item.content">
              <span class="images"
                    :key="i"
                    v-if="val.type==3">
                <img src="../../images/center/ts_img.png"
                     alt />
              </span>
            </template>

            <p class="setTime">
              <img class="date"
                   src="../../images/center/ts_naozhong.png"
                   alt />
              <span>{{item.push_date}}</span>
              <!-- <span>{{item.setTime.time}}</span> -->
              <span :class="{not:item.status=='1'}"
                    class="status tac fr">{{item.status==1?'未读':'已读'}}</span>
            </p>
          </div>
          <div class="right">
            <span @click="del(item)">删除</span>
          </div>
        </li>
      </van-list>
    </ul>
    <div @click="add"
         class="add"></div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
  data () {
    return {
      pushList: [],
      curr: 1,
      limits: 10,
      expansion: null,
      before: 0,
      x: '',
      y: '',
      X: '',
      Y: '',
      swipeX: '',
      swipeY: '',
      loading: false,
      finished: false,
      error:false
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'turing'])
  },
  created () {
    this.getPush()
  },
  watch: {

  },
  mounted () {

    let expansion = null; //是否存在展开的contents
    let container = document.querySelectorAll(".list"); //找到所有的左滑盒子
    let before = 0;
    // console.log(container);
    for (let index = 0; index < container.length; index++) {
      let x, y, X, Y, swipeX, swipeY; //监听左滑盒子的触摸事件
      container[index].addEventListener("touchstart", event => {
        //获取触摸点的坐标targetTouches[0].pageX,Y
        x = event.changedTouches[0].pageX;
        y = event.changedTouches[0].pageY;
        swipeX = true;
        swipeY = true;
        if (expansion) {
          //判断是否展开，如果展开则收起
          // expansion.className = "swiperight";
          this.pushList[index].className = "";

        }
      });
      //监听左滑盒子的屏幕上滑动事件 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
      container[index].addEventListener("touchmove", event => {
        X = event.changedTouches[0].pageX;
        Y = event.changedTouches[0].pageY; //console.log(X,Y); //判断左右滑动
        if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
          // 阻止事件冒泡
          event.stopPropagation();
          if (X - x > 10) {
            //右滑
            event.preventDefault(); // 取消事件的默认动作
            // this.className = "swiperight";
            this.className = "";
          }
          if (x - X > 20) {
            //左滑
            event.preventDefault();
            // this.className = "swipeleft"; //左滑展开
            if (expansion) {
              this.pushList[before].className = "";
            }
            // console.log(this.pushList[index].className)
            this.pushList[index].className = "swipeleft";

            before = index;
            // expansion = this;
            expansion = true;
          }
          swipeY = false;
        }
        // 上下滑动
        // if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
        //   swipeX = false;
        // }
      });
    }
  },
  methods: {
    ...mapMutations(['setPushList']),
    // 推送列表
    getPush () {
      let params = {
        receive_uid: this.userInfo.uid,
        push_uid: this.turing.app_id,
        curr: this.curr,
        limits: this.limits
      }
      this.http.$post('robot/message.api/lists', params).then(res => {
        // console.log(res)
        this.loading = false
        if (res.total <= res.limits) {
          this.finished = true
        }
        res.list.map(val => {
          val.className = ''
        })
        this.pushList = res.list
      }).catch(err => {
        this.error = true
      })
    },
    // 滚动到底部
    onLoad () {
      this.loading = true
      setTimeout(() => {
        this.limits += 10
        this.getPush()
      }, 1500)
    },
    // 新增
    add () {
      this.$router.push({ name: 'PushAdd' })
    },
    // 编辑
    goEdit (item) {
      this.setPushList(item)
      this.$router.push({
        name: 'PushAdd',
        query: {
          num: 1
        }
      })
    },
    // 开始滑动
    slideStart (index, event) {
      // console.log(index,event)
      //获取触摸点的坐标targetTouches[0].pageX,Y
      this.x = event.changedTouches[0].pageX;
      this.y = event.changedTouches[0].pageY;
      this.swipeX = true;
      this.swipeY = true;
      if (this.expansion) {
        //判断是否展开，如果展开则收起
        // expansion.className = "swiperight";
        this.pushList[index].className = "";

      }
    },
    // 滑动过程
    slideMove (index, event) {
      this.X = event.changedTouches[0].pageX;
      this.Y = event.changedTouches[0].pageY;
      //判断左右滑动
      if (this.swipeX && Math.abs(this.X - this.x) - Math.abs(this.Y - this.y) > 0) {
        // 阻止事件冒泡
        event.stopPropagation();
        if (this.X - this.x > 10) {
          //右滑
          event.preventDefault(); // 取消事件的默认动作
          // this.className = "swiperight";
          this.className = "";
        }
        if (this.x - this.X > 20) {
          //左滑
          event.preventDefault();
          // this.className = "swipeleft"; //左滑展开
          if (this.expansion) {
            this.pushList[this.before].className = "";
          }
          this.pushList[index].className = "swipeleft";
          this.before = index;
          this.expansion = true;
        }
        this.swipeY = false;
      }
      // 上下滑动
      // if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
      //   swipeX = false;
      // }
    },
    // 删除
    del (item) {
      this.$dialog.confirm({
        message: '是否删除此消息?'
      }).then(() => {
        this.http.$post('robot/message.api/del', {
          msg_ids: item.msg_id
        }).then(res => {
          this.$toast.success('删除成功')
          this.getPush()
        }).catch(err => {
          this.$toast.fail(err.msg)
        })
      }).catch(() => {
        this.$toast('已取消删除!')
      });

    }
  }
};
</script>
<style lang="less" scoped>
.swipeleft {
  transform: translateX(-3.13rem);
  // -webkit-transform: translateX(-3.13rem);
  // -webkit-transition: all 0.3s linear;
  //  transition: all 0.3s linear;
  //  transform: translateX(-15%);
  //  -webkit-transform: translateX(-15%);
}
.push-body {
  min-height: 100vh;
  background-color: #f5f5f5;
  // position: relative;
  ul {
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    width: 22.54rem;
    overflow: hidden;
    li {
      width: 24.94rem;
      position: relative;
      transition: all 0.3s linear;
      // transform: translate3d(0, 0, 0);
    }
    .left {
      margin-bottom: 0.63rem;
      width: 21rem;
      background-color: #fff;
      padding: 1.13rem 0 1.06rem 0.78rem;
      border-radius: 0.63rem;
      position: relative;
      > p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: SourceHanSansCN-Regular;
        font-size: 1rem;
        letter-spacing: 0.02rem;
        color: #333333;
      }
      > span {
        display: inline-block;
        // margin: 0.97rem 1.28rem 1.06rem 0;
      }
      .text {
        margin-right: 2.34rem;
        margin-bottom: 0.97rem;
      }
      .setTime {
        font-size: 0.81rem;
        color: #666666;
        margin-top: 1.06rem;
        margin-right: 0.63rem;
        .date {
          width: 0.94rem;
          height: 0.94rem;
          vertical-align: bottom;
          // background-color: #1fc48c;
          // border: solid 0.03rem #1fc48c;
        }
        .status {
          // background: url("../../images/center/ts_status.png")
          width: 2.13rem;
          height: 1.5rem;
          color: #8c8c8c;
          line-height: 1.5rem;
          background-color: #f1f1f2;
          border-radius: 0rem 0.75rem 0.75rem 0.81rem;
        }
        .not {
          color: #1f8bf8;
        }
      }
      .yuyin {
        margin-right: 1.03rem;
        font-size: 0.88rem;
        img {
          width: 1.56rem;
          vertical-align: bottom;
          height: 1.38rem;
        }
        // background-image: linear-gradient(135deg, #63de08 0%, #21bf1a 100%);
        // border-radius: 0.56rem;
      }
      .images {
        padding-right: 0.5rem;
        img {
          width: 1.5rem;
          height: 1.19rem;
          vertical-align: bottom;
          border-width: 0.06rem;
          border-image-slice: 1;
        }
      }
    }
    .right {
      width: 3.13rem;
      position: absolute;
      top: 0;
      right: -0.1rem;
      bottom: 0;
      background-color: #f62929;
      border-radius: 0rem 0.63rem 0.63rem 0rem;
      font-size: 0.88rem;
      color: #fff;
      text-align: center;
      span {
        position: absolute;
        top: 44%;
        left: 18%;
        width: 2rem;
        // height: 0.81rem;
        font-size: 0.88rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
    }
  }
  .add {
    position: fixed;
    bottom: 2rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #1f8bf8;
    &::before {
      content: "";
      color: #fff;
      width: 1.44rem;
      height: 0.2rem;
      position: absolute;
      left: 0.53rem;
      top: 1.15rem;
      background-color: #fff;
    }
    &::after {
      content: "";
      color: #fff;
      height: 1.44rem;
      width: 0.2rem;
      position: absolute;
      top: 0.53rem;
      left: 1.15rem;
      background-color: #fff;
    }
  }
}
</style>
